<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in bannerlist" :key="item.id">
          <img :src="'http://localhost:3000' + item.img" alt="" class="ia" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../node_modules/swiper/js/swiper.min";
import Swiper from "swiper";
import {getBanner} from '../util/request/api'
export default {
  data() {
    return {bannerlist:[]};
  },
  mounted() {
    getBanner()
    .then((res) => {
        if(res.data.code==200){
          this.bannerlist = res.data.list;
        }
        })
    .catch((err) => {
        console.log(err, "错误捕获");
      })
  },
  updated() {
    //   //组件一加载 就实例化轮播图
    new Swiper(".swiper-container", {
      loop: true, //循环
      // autoplay:true,//自动切换的属性，默认是3秒
      autoplay: {
        delay: 1000, //毫秒制
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
};
</script>
<style>
@import "../../node_modules/swiper/css/swiper.min.css";
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>
